<!--
 * @Descripttion:
 * @version:
 * @Author: qinyonglian
 * @Date: 2019-11-01 14:46:20
 * @LastEditors: qinyonglian
 * @LastEditTime: 2021-04-06 13:46:54
 -->
<template>
  <!-- 弹出的主要容器 -->
  <div
    ref="drawerCloud"
    class="drawerCloud"
  >
    <div
      v-show="dropDocShow"
      class="drawerDiskModle"
    >
      <div class="mainUpload">
        拖到这里即可上传
      </div>
    </div>
    <el-row>
      <el-col
        :span="4"
        class="width260"
      >
        <!-- 左侧菜单 -->
        <div
          :style="sideslip?'borderRight: 1px solid #E7EBF0':''"
          class="cloudMenu"
        >
          <el-menu
            @select="selectMenu"
            :collapse="false"
            default-active="1-2"
            active-text-color="#3F3F3F"
            background-color="#F6F9FC"
            class="el-menu-vertical-demo"
          >
            <template>
              <div
                v-for="(menu, _index) in MENU_LIST"
                :key="_index"
              >
                <el-submenu
                  v-if="menu.children"
                  :index="menu.router"
                  :disabled="['1-3', '1-4', '2', '3', '4', '5'].includes(menuCheck) && menu.router == '4'"
                >
                  <template slot="title">
                    <i
                      :class="menu.icon"
                      class="jeicon"
                    />
                    <span slot="title">
                      <span>{{ menu.title }}</span>
                    </span>
                  </template>
                  <template v-if="menu.children">
                    <el-menu-item
                      v-for="(item, indexChild) in menu.children"
                      :key="indexChild"
                      :index="item.router"
                      :class="item.backgroundStatus?'whiteBackground':''"
                    >
                      <span
                        v-if="item.color"
                        :style="`background: ${item.color}`"
                        class="circle"
                      />
                      <i
                        v-if="item.icon"
                        :class="item.icon"
                        class="jeicon"
                      />
                      <span class="circleSpan">
                        <span>{{ item.title }}</span>
                        <!-- 我收到分享的角标 -->
                        <span
                          v-if="badgesPro && item.router == '1-4' && badgesPro.disk > 0"
                          class="menuNums"
                        >{{ badgesPro.disk > 99 ? '99+': badgesPro.disk }}</span>
                      </span>
                      <span
                        v-if="item.backgroundStatus"
                        class="jeicon jeicon-check rightIcon whiteBackground"
                      />
                    </el-menu-item>
                  </template>
                </el-submenu>
                <el-menu-item
                  v-else
                  :index="menu.router"
                >
                  <i
                    :class="menu.icon"
                    class="jeicon"
                  />
                  <span slot="title">{{ menu.title }}<span
                    v-if="uploadObjList.uploadNums && menu.router == '2'"
                    class="menuNums"
                  >{{ uploadObjList.uploadNums }}</span></span>
                </el-menu-item>
              </div>
            </template>
          </el-menu>
        </div>
      </el-col>
      <el-col
        v-if="sideslip"
        :span="4"
        class="width260"
      >
        <div
          class="bgF6F9FC"
          style="height: 100vh;"
        >
          <div class="slide-search">
            <el-autocomplete
              @select="sildeSelectVal"
              v-model="sildeSearch"
              :fetch-suggestions="querySearch"
              :trigger-on-focus="false"
              prefix-icon="jeicon jeicon-search"
              placeholder="搜索"
              clearable
            >
              <template slot-scope="{ item }">
                <div class="textOmitDisk">
                  {{ item.value }}
                </div>
                <span class="grayColor fontSize12">{{ item.parentPathName }}</span>
              </template>
            </el-autocomplete>
          </div>
          <div class="overFlowX">
            <tree :child-list="treeList" />
          </div>
        </div>
      </el-col>
      <!-- sideslip是否点击侧滑了 -->
      <el-col
        :span="sideslip ? 16:20"
        :class="sideslip ? 'widthDeleTwo260':'widthDele260'"
        class="contentDiskModle"
        style="background: #fff"
      >
        <!-- 右侧内容 -->
        <div
          v-show="headMenu.head"
          class="cloudHead"
        >
          <!-- 右侧头部内容 -->
          <div style="position: relative;">
            <div
              v-if="isShow"
              class="closePage"
            >
              <i
                @click="closePage"
                class="jeicon jeicon-error"
              />
            </div>
            <el-row
              type="flex"
              justify="space-between"
            >
              <el-col :span="12">
                <div class="head">
                  <div
                    v-for="(head, head_) in headMenu.headMenu"
                    :key="head_"
                    @click="clickFirstMenu(head)"
                    class="everyHead ieCompatible"
                  >
                    <i
                      v-if="headMenu.headStatus == '2'"
                      :class="head.icon"
                      class="jeicon allFileIcon"
                    />
                    <i
                      @click.stop="sideslipMenu"
                      v-if="!head.children && headMenu.headStatus == '1'"
                      :class="sideslip?'jeicon-menu-collapse1':'jeicon-menu-collapse'"
                      class="jeicon allFileIcon hoverColor"
                    />
                    <span
                      v-if="!head.children"
                      class="allFile"
                    >{{ head.title }}</span>
                    <el-dropdown
                      v-else
                      @command="handleCommand"
                      style="height:25px"
                    >
                      <span class="el-dropdown-link">
                        {{ head.title }}<i class="el-icon-caret-bottom" />
                      </span>
                      <template v-if="head.children">
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item
                            v-for="(child, child_) in head.children"
                            :key="child_"
                            :command="child"
                          >
                            {{ child.title }}
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div v-show="!headMenu.hidenSearch">
                  <el-row
                    type="flex"
                    justify="end"
                  >
                    <el-col
                      :span="12"
                      class="textRight pr60"
                    >
                      <div class="headRight displayInline">
                        <el-input
                          v-model="searchInput"
                          prefix-icon="el-icon-search"
                          placeholder="请输入内容"
                          clearable
                        />
                      </div>
                      <div
                        @click="rectangleIconChange(headMenu)"
                        class="displayInline ml10"
                      >
                        <i
                          :class="headMenu.rectangleIcon"
                          class="jeicon rectangleIcon hoverColor"
                        />
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- 新建 上传 下载等 -->
          <docMain
            @uploadChange="uploadChange"
            @searchEmpty="searchEmpty"
            :isMenu="headMenu"
            :suffix="suffix"
            :tag="tag"
            :searchInput="searchInput"
            :dropFile="dropFile"
            :firstMenu="firstMenu"
            :sildeSearch="sildeSearchSelect"
            :closeProgress="closeProgress"
            :directoryList="directoryList"
            :directoryPath="directoryPath"
          />
        </div>
      </el-col>
    </el-row>
    <!-- 关闭按钮 -->
    <!-- <div class="closePage">
      <i
        @click="closePage"
        class="jeicon jeicon-error"
      />
    </div> -->
    <dialogDoc :isDialog="dialogData" />
  </div>
</template>
<script>
import VueI18n from 'vue-i18n';
import { EventBus } from './common/eventBus';
import docMain from './page/main/index';
import { menuSelect } from './common/util';
import { MENU_LIST } from './common/constant';
import Tree from './components/tree';
import List from './controllers/list/listController';
import { isFileAdmin } from './actions/action';
// 文件弹出框组件
import dialogDoc from './page/common/dialog/index';


const i18n = new VueI18n({
  locale: JE.getCookies('je-local-lang') || 'zh_CN', // 语言标识
  messages: {
    zh_CN: require('./lang/zh'), // 中文语言包
    en: require('./lang/en'), // 英文语言包
  },
});
export default {
  components: {
    docMain, Tree, dialogDoc,
  },
  inject: ['badgesPro'],
  // props: {
  //   badgeDrawer: {
  //     type: Number,
  //     default() {
  //       return 0;
  //     },
  //   },
  // },
  i18n,
  data() {
    return {
      MENU_LIST,
      diskShow: false, // 默认是显示的
      headMenuIs: true, // 是否显示头部样式
      menuCheck: '1-2', // 当前选中的菜单
      headMenu: [], // 头部按钮
      suffix: '', // 头部一级菜单尾缀
      uploadObjList: {
        uploadList: [], // 正在上传的数据
        uploadNums: 0, // 当前正在上传的个数
      }, // 当前正在上传的所有数据
      tag: [], // 点击的tag
      searchInput: '', // 搜索框里面的值
      sildeSearchSelect: '', // 当输入框的下拉菜单选中的时候后显示
      dropDocShow: false, // 拖拽文件的背景遮罩显示
      dropFile: [], // 拖拽的文件流
      firstMenu: {}, // 个人或者公司的一级目录
      sideslip: false, // 是否显示侧滑
      treeList: [], // 侧滑数据
      list: new List(),
      sildeSearch: '', // 侧滑数据
      closeProgress: false, // 是否关闭了弹框，然后关掉正在上传的数据
      directoryList: [], // 文件夹中文件的列表
      dialogData: {
        isShow: false, // 是否显示弹框
        docEntr: '', // 默认是新建文件夹
        inputData: {}, // 修改文件的名称传递
        removeAll: '', // 是否是清空全部
      },
      directoryPath: [], // 文件的路径path
      dropTarget: '', // 记录最后拖拽目标区域的元素，当和离开的最后的元素相同的时候才能执行相应的离开操作
    };
  },
  computed: {
    diskType() {
      let type = '';
      if (this.menuCheck == '1-1') {
        type = 'company';
      }
      if (this.menuCheck == '1-2') {
        type = 'self';
      }
      return type;
    },
    isShow() {
      const { CLOUD_IS_PLUGIN } = JE.systemConfig;
      return !(CLOUD_IS_PLUGIN == '1');
    },
  },
  watch: {
    diskShow(nv) {
      this.$nextTick(() => {
        if (nv) {
          // $('.drawerCloud').css({ 'z-index': getMaxZindex() + 2, position: 'fixed' });
          $('.drawerCloud').css({ 'z-index': 5, position: 'fixed' });
        } else {
          $('.drawerCloud').parent().remove();
          window.removeEventListener('resize', () => {
            this.initHeight();
          });
        }
      });
    },
  },
  mounted() {
    this.fileAdminOf();
    this.closeProgress = false;
    this.selectMenu(this.menuCheck);
    // 监听文件上传的方法
    this.addEventUpload();
    // 监听到孙组件的关闭
    EventBus.$on('closeDialog', () => {
      this._initProps();
    });
    // 监听窗口大小改变
    window.addEventListener('resize', () => {
      this.initHeight();
    });
  },
  beforeDestroy() {
    EventBus.$off('closeDialog');
  },
  methods: {
    // 计算右侧窗口的高度
    initHeight() {
      this.$nextTick(() => {
        const bodyHeight = $('body').height();
        $('.contentDiskModle').height(bodyHeight - 50);
      });
    },
    setVisible(visible) {
      this.diskShow = visible;
    },
    getBage(val) {
      this.badgesPro = val;
    },
    // 判断当前登录的用户是否是文档管理员
    async fileAdminOf() {
      const admin = await isFileAdmin();
      admin.success && sessionStorage.setItem('fileAdmin', 'true');
      admin.success || sessionStorage.setItem('fileAdmin', 'false');
    },
    // 初始化向子组件的传值
    _initProps() {
      this.firstMenu = {};
    },
    // 选中搜索的结果
    sildeSelectVal(item) {
      // const list = {
      //   name: '全部文件',
      //   diskType: this.diskType,
      //   type: null,
      //   nodeId: '',
      //   parent: '',
      //   open: false,
      //   key: this.sildeSearch,
      // };
      // this.$set(this.treeList, 0, list);
      this.sildeSearchSelect = item;
      // EventBus.$emit('SLIDE_TREE', list);
    },
    // 搜索的结果
    async querySearch(queryString, cb) {
      const data = await this.downListSideslip(queryString);
      cb(data);
    },
    // 侧滑搜索的下拉菜单
    async downListSideslip(val) {
      // 获取数据
      const param = {
        diskType: this.diskType,
        order: JSON.stringify([{ code: 'time', type: 'desc' }]),
        nodeType: 'dir',
        parentId: null,
        tag: '',
        suffix: '',
        key: val,
      };
      const res = await this.list.initList(param);
      const itemRes = res.map((item) => {
        item.open = false;
        item.source = 'search';
        item.value = item.name;
        return { ...item };
      });
      return itemRes;
    },
    // 点击侧滑样式
    sideslipMenu() {
      this.sideslip = !this.sideslip;
      if (!this.sideslip) return false;
      this.getSlideList(this.sildeSearch);
    },
    async getSlideList(val) {
      // 获取数据
      const param = {
        diskType: this.diskType,
        order: JSON.stringify([{ code: 'time', type: 'desc' }]),
        nodeType: 'dir',
        parentId: null,
        tag: '',
        suffix: '',
        key: val,
      };

      const list = {
        name: '全部文件',
        diskType: this.diskType,
        type: null,
        nodeId: '',
        parent: '',
        open: true,
        source: 'search',
      };
      const res = await this.list.initList(param);
      const itemRes = res.map((item) => {
        item.open = false;
        item.source = 'search';
        return { ...item };
      });
      list.children = itemRes;
      this.$set(this.treeList, 0, list);
    },
    // 接收到子组件上传的方法
    uploadChange() {
      this.uploadObjList.uploadList = JSON.parse(sessionStorage.getItem('docUploadArr'));
      this.uploadObjList.uploadNums = this.uploadObjList.uploadList.length;
    },
    // 关闭 网盘的弹窗
    closePage() {
      this.closeProgress = true;
      sessionStorage.removeItem('docUploadArr');
      this.setVisible(false);
    },
    // 当点击全部文件的时候搜索框要为空
    searchEmpty() {
      this.searchInput = '';
    },
    // 选中指定的菜单
    selectMenu(val) {
      this.searchInput = '';
      this.sideslip = false;
      if (val == '1-1' || val == '1-2') {
        window.sessionStorage.setItem('diskType', val);
      }
      this.selsectIntercept(val); // 菜单点击的拦截过滤
      if (val.indexOf('4-') >= 0) {
        // 减一的原因就是因为红色选中是2，所以所有的选中都要-1，全部选中就是0
        const newVal = val.split('-')[1] - 1;
        const nvalIndex = this.tag.findIndex(item => item == newVal);
        nvalIndex > -1 ? this.tag.splice(nvalIndex, 1) : this.tag.push(newVal);
        newVal == 0 && (this.tag.length = 0);
        return this.tag;
      }
      if (val == 2) {
        this.headMenuIs = false;
      }
      this.suffix = '';
      // 当前选中的菜单
      this.menuCheck = val;
      // 改变头部显示样式
      this.headMenu = menuSelect(this.menuCheck);
    },
    // 点击改变排列样式为（矩形或者列表）
    rectangleIconChange() {
      if (this.headMenu.rectangleIcon == 'jeicon-product-list') {
        this.headMenu.rectangleIcon = 'jeicon-work';
      } else {
        this.headMenu.rectangleIcon = 'jeicon-product-list';
      }
    },
    // 点击个人或者公司的一级目录,点击全部文件的一个入口
    clickFirstMenu(head) {
      // if (head.children) return false;
      // // 当点击全部文件的时候默认初始值
      head.title == '全部文件' && (head.change = !head.change);
      this.firstMenu = head;
      // head.title == '全部文件' && (this.searchInput = '') && (this.suffix = '') &&
    },
    handleCommand(command) {
      command.time = new Date().getMilliseconds();
      this.suffix = command;
      // 这边要做的处理就是先将后缀变为小写，不过对于Word来说，有doc或者docx
    },
    // 左侧菜单点击过滤方法，拦截点击标签之后的多选
    selsectIntercept(menuCheck) {
      const menuOther = ['1-3', '1-4', '2', '3', '4', '5'];
      const nowMenu = sessionStorage.getItem('diskType');
      const menuEls = document.querySelector('.cloudMenu').querySelectorAll('.el-menu-item');
      if (menuOther.includes(menuCheck)) {
        menuEls[0].style.backgroundColor = 'rgb(246, 249, 252)';
        menuEls[1].style.backgroundColor = 'rgb(246, 249, 252)';
        this.clearTagFun(); // 让标签恢复默认
        sessionStorage.removeItem('diskType');
      } else if (nowMenu == '1-2') {
        menuEls[0].style.backgroundColor = 'white';
        menuEls[1].style.backgroundColor = 'rgb(246, 249, 252)';
        menuCheck.indexOf('4-') < 0 && this.clearTagFun();
        menuCheck.indexOf('4-') >= 0 && this.tagMenuChange(menuCheck, this.MENU_LIST[3]);
      } else if (nowMenu == '1-1') {
        menuEls[0].style.backgroundColor = 'rgb(246, 249, 252)';
        menuEls[1].style.backgroundColor = 'white';
        menuCheck.indexOf('4-') < 0 && this.clearTagFun();
        menuCheck.indexOf('4-') >= 0 && this.tagMenuChange(menuCheck, this.MENU_LIST[3]);
      }
    },
    // 清空标签的选中
    clearTagFun() {
      this.tag = []; // 清空标签的数据内容
      this.MENU_LIST[3].children.filter((item, index_) => {
        item.backgroundStatus = false;
        if (index_ == 0) item = true;
        return item;
      });
    },
    // 点击标签要实现多选的功能，并且点击全部其他全部关闭
    tagMenuChange(router, tagMenu) {
      // 如果点击的是全部，就让其他的背景颜色全部关闭
      const tagMenuChild = JSON.parse(JSON.stringify(tagMenu.children));
      if (router == '4-1') {
        tagMenu.children = tagMenuChild.filter((item) => {
          if (item.router == '4-1') {
            item.backgroundStatus = true;
          } else {
            item.backgroundStatus = false;
          }
          return item;
        });
      } else {
        tagMenu.children = tagMenuChild.filter((item) => {
          if (item.router != '4-1' && router == item.router && !item.backgroundStatus) {
            item.backgroundStatus = true;
          } else if (item.router != '4-1' && router == item.router && item.backgroundStatus) {
            item.backgroundStatus = false;
          }
          return item;
        });
        tagMenuChild[0].backgroundStatus = false;
      }
    },
    // 监听文件上传拖拽到指定位置
    addEventUpload() {
      this.directoryList = [];
      this.directoryPath = [];
      const drawUploadEl = document.querySelector('.contentDiskModle');
      drawUploadEl.addEventListener('dragenter', this.dragEnterEl, false);
    },
    dragEnterEl(e) {
      this.dropTarget = e.target; // 记录最后进入的目标元素
      let mainEl = '';
      e.preventDefault();
      this.dropDocShow = true; // 拖拽文件进入指定位置
      setTimeout(() => {
        mainEl = document.querySelector('.drawerCloud').querySelector('.drawerDiskModle');
        this.mainElDrop(mainEl);
      });
    },
    dragoverMain(e) {
      e.dataTransfer.dropEffect = 'copy'; // 兼容某些三方应用，如圈点
      e.preventDefault();
    },
    clickMain(e) {
      e.preventDefault();
      this.overDrop(); // 点击区域也结束拖拽上传，并上传监听
    },
    dropMain(e) {
      e.preventDefault();
      this.directoryPath = [];
      this.directoryList = [];
      this.uploadFunc(e);
    },
    async uploadFunc(event) {
      event.preventDefault();
      // 这边有个思路，判断传过来的参数，如果全部是文件，则执行单个上传，如果拖拽过来含有文件夹，则要把文件以及文件夹中的
      // 文件全部放在一个数组中，调取后端一个验证的接口，调取接口成功，则一个一个进行上传
      const filesList = []; // 文件的数组，为了判断是不是拖拽的都是文件
      const files = [];
      if (event.type === 'drop') {
        const fileList = event.dataTransfer.files;
        const len = fileList.length;
        if (!fileList.length) return false;
        for (let i = 0; i < len; i++) {
          // 这边修复一个问题： 在获取的文件流中，有的文件的type 是空；所以要从name 中截取
          const { name } = fileList[i];
          const type = name.substring(name.lastIndexOf('.') + 1);
          if (fileList[i].type || type) {
            filesList.push(fileList[i]);
          }
          files[i] = fileList[i];
        }
        this.dropFile = filesList;
        // 如果文件的个数等于总文件的场地的时候，说明拖拽的全是文件
        if (filesList.length == len) {
          // this.dropFile = filesList;
          this.dropDocShow = false; // 拖拽文件结束操作
          return false;
        }
        const { items } = event.dataTransfer;
        if (items && items.length && items[0].webkitGetAsEntry != null) {
          const that = this;
          const promiseClick = () => {
            const p = new Promise((resolve, reject) => {
              // 做一些异步操作
              for (let i = 0; i < items.length; i++) {
                const item = items[i];
                let entry;
                // eslint-disable-next-line no-cond-assign
                if (item.webkitGetAsEntry && (entry = item.webkitGetAsEntry())) {
                  if (entry.isFile) {
                    // 把文件对象放到结果数组中
                    // entry.num = 1;
                    // console.log(entry, entry.file)
                    // that.directoryList.push(entry);
                    // that.directoryPath.push({ path: entry.fullPath.substring(1) });
                  } else if (entry.isDirectory) {
                    entry.num = 1;
                    that.addFilesFormDirectory(entry, entry.name, (file) => {
                      that.directoryList.push(file);
                      that.directoryPath.push({ path: file.fullPath });
                    });
                  }
                }
              }
              setTimeout(() => {
                resolve(that.directoryList);
              }, 1000);
            });
            return p;
          };
          promiseClick().then((data) => {
            that.overDrop(data);
          });
          // this.addFilesItems(items);
        }
      }
    },

    // async setPromiseCh(dirData) {
    //   console.log(dirData);
    //   debugger;
    //   const promiseArr = [];
    //   dirData.forEach((files, index) => {
    //     promiseArr.push(new Promise((resolve) => {
    //       files.file((file) => {
    //         dirData[index].fileObj = file;
    //         resolve(file);
    //       });
    //     }));
    //   });
    //   await Promise.all(promiseArr);
    //   return dirData;
    // },

    // getPromise(items) {
    //   return new Promise(async (resolve) => {
    //     let promiseChains = [];
    //     for (let i = 0; i < items.length; i++) {
    //       const item = items[i];
    //       let entry;
    //       // eslint-disable-next-line no-cond-assign
    //       if (item.webkitGetAsEntry && (entry = item.webkitGetAsEntry())) {
    //         if (entry.isFile) {
    //           // 把文件对象放到结果数组中
    //           entry.num = 1;
    //           promiseChains.push(await this.getPromise(entry));
    //         } else if (entry.isDirectory) {
    //           entry.num = 1;
    //           const button = await this.getFileByDir(entry);
    //           promiseChains = promiseChains.concat(button);
    //         }
    //       }
    //     }
    //     resolve(promiseChains);
    //   });
    // },

    // /** 根据文件夹获取文件 */
    // async getFileByDir(directory, rets, then) {
    //   const dirReader = directory.createReader();
    //   const promiseChains = await new Promise((resolve) => {
    //     dirReader.readEntries((entries) => {
    //       const ret = rets || [];
    //       let hasSubEntry = false; // 是否有子文件夹
    //       entries.forEach(async (entry, i) => {
    //         if (entry.isFile) {
    //           entry.num = directory.num + 1;
    //           // 如果是文件
    //           ret.push(entry);
    //           this.directoryPath.push({ path: entry.fullPath.substring(1) });
    //           // await entry.file((file) => {
    //           //   // 那么暴露出去的就是 '文件夹/q.jpg' 这种形式

    //           //   ret.push(this.getPromise(file));
    //           // });
    //         }
    //         if (entry.isDirectory) {
    //           hasSubEntry = true;
    //           // 递归处理
    //           // eslint-disable-next-line no-undef
    //           entry.num = directory.num + 1;
    //           this.getFileByDir(entry, ret, resolve);
    //         }
    //         if (i === entries.length - 1 && !hasSubEntry) {
    //           if (then) {
    //             then(ret);
    //           } else {
    //             resolve(ret);
    //           }
    //         }
    //       });
    //     });
    //   });
    //   return promiseChains;
    // },

    // /** 创建Prromise返回值 */
    // createRet(enrty) {
    //   return new Promise((resolve) => {
    //     resolve(enrty);
    //   });
    // },

    copy(obj) {
      let newobj = null; // 声明一个变量用来储存拷贝之后的内容
      // 判断数据类型是否是复杂类型，如果是则调用自己，再次循环，如果不是，直接赋值即可，
      // 由于null不可以循环但类型又是object，所以这个需要对null进行判断
      if (typeof (obj) == 'object' && obj !== null) {
        // 声明一个变量用以储存拷贝出来的值,根据参数的具体数据类型声明不同的类型来储存
        newobj = obj instanceof Array ? [] : {};
        // 循环obj 中的每一项，如果里面还有复杂数据类型，则直接利用递归再次调用copy函数
        for (const i in obj) {
          newobj[i] = this.copy(obj[i]);
        }
      } else {
        newobj = obj;
      }
      return newobj; // 函数必须有返回值，否则结构为undefined
    },
    // addFilesItems(items) {
    //   const arr = [];
    //   const that = this;
    //   for (let i = 0; i < items.length; i++) {
    //     const item = items[i];
    //     let entry;
    //     // eslint-disable-next-line no-cond-assign
    //     if (item.webkitGetAsEntry && (entry = item.webkitGetAsEntry())) {
    //       if (entry.isFile) {
    //         // 把文件对象放到结果数组中
    //         entry.num = 1;
    //         arr.push(entry);
    //         // that.directoryList.push(entry);
    //         // that.directoryPath.push({ path: entry.fullPath.substring(1) });
    //       } else if (entry.isDirectory) {
    //         entry.num = 1;
    //         that.addFilesFormDirectory(entry, entry.name, (file) => {
    //           arr.push(file);
    //         });
    //       }
    //     }
    //   }
    //   console.log('[[][]', arr)
    // },
    addFilesFormDirectory(directory, path, callback) {
      const that = this;
      const dirReader = directory.createReader();
      dirReader.readEntries((entries) => {
        entries.forEach((entry) => {
          if (entry.isFile) {
            // 如果是文件
            entry.file((file) => {
              file.fullPath = `${path}/${file.name}`;
              // 那么暴露出去的就是 '文件夹/q.jpg' 这种形式
              file.num = directory.num + 1;
              callback && callback(file);
            });
          } if (entry.isDirectory) {
            // 递归处理
            // eslint-disable-next-line no-undef
            entry.num = directory.num + 1;
            return that.addFilesFormDirectory(entry, `${path}/${entry.name}`, callback);
          }
        });
      });
    },
    // addFilesFormDirectorys(directory, callback) {
    //   // const that = this;
    //   const dirReader = directory.createReader();
    //   dirReader.readEntries((entries) => {
    //     entries.forEach((entry) => {
    //       if (entry.isFile) {
    //         // 如果是文件
    //         entry.file((file) => {
    //           file.fullPath = `${directory.name}/${file.name}`;
    //           // 那么暴露出去的就是 '文件夹/q.jpg' 这种形式
    //           file.num = directory.num + 1;
    //           callback.push(file);
    //         });
    //       } if (entry.isDirectory) {
    //         // 递归处理
    //         // eslint-disable-next-line no-undef
    //         entry.num = directory.num + 1;
    //         this.addFilesFormDirectory(entry, callback);
    //       }
    //     });
    //   });
    // },

    dragLeave() {
      const mainEl = document.querySelector('.drawerCloud').querySelector('.drawerDiskModle');
      this.dropDocShow = false; // 拖拽文件结束操作
      mainEl.removeEventListener('dragleave', this.dragLeave, false);
    },
    // 文件拖拽到指定位置
    mainElDrop(mainEl) {
      mainEl.addEventListener('dragover', this.dragoverMain, false);
      mainEl.addEventListener('click', this.clickMain, false);
      mainEl.addEventListener('drop', this.dropMain, false);
      const diskEle = document.querySelector('.drawerCloud').querySelector('.drawerDiskModle');
      // const diskEle = document.querySelector('.documents');
      diskEle.addEventListener('dragleave', this.dragLeave, false);
    },
    // 上传结束
    overDrop(directoryList) {
      const contentDiskModle = document.querySelector('.contentDiskModle');
      const mainEl = document.querySelector('.drawerCloud').querySelector('.drawerDiskModle');
      contentDiskModle.addEventListener('dragenter', this.dragEnterEl, false);
      mainEl.removeEventListener('dragover', this.dragoverMain, false);
      mainEl.removeEventListener('click', this.clickMain, false);
      mainEl.removeEventListener('drop', this.dropMain, false);
      mainEl.removeEventListener('dragleave', this.dragLeave, false);
      this.dropDocShow = false; // 拖拽文件结束操作
      if (!directoryList) return false; // 如果是文件上传的话就停止向下执行
      const res = directoryList.findIndex(item => (item.num > 4));
      if (res && res > -1) {
        this.dialogData.docEntr = 'directory';
        this.dialogData.isShow = true;
        this.directoryPath = [];
      } else {
        if (!directoryList.length) return false;
        if (!this.directoryPath.length) return false;
        EventBus.$emit('directory', {
          directoryList,
          directoryPath: this.directoryPath,
        });
      }
    },
  },
};
</script>
<!--[if IE]-->
<style>
@import "./style/ie9.css";
</style>
<!--[endif]-->
<style lang="scss">
@import "./style/index.scss";
</style>
<style>
@import "./style/eleMenu.css";
</style>
